<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

<div class="wrap">
    <div class="parent">
        是客户数量回复
        <div class="child1">child 1</div>
        <div class="child2">child 2</div>
        <div class="child3">child 3</div>
        <!-- 注释内容 -->
    </div>
</div>

<script>
// 节点关系（类似家庭中辈分关系）
var parent = document.querySelector('.parent');
var child2 = document.querySelector('.child2');

// parentNode属性返回元素的父节点
// console.log( child2.parentNode );// parent
// console.log( child2.parentNode.parentNode );// wrap

// children属性返回元素的所有元素子节点
// console.log( parent.children );// HTMLCollection(3) [div.child1, div.child2, div.child3]

// childNodes属性返回元素的所有子节点
// console.log( parent.childNodes );// NodeList(9) [text, div.child1, text, div.child2, text, div.child3, text, comment, text]

// nextSibling属性返回下一个兄弟节点
// console.log( child2.nextSibling );

// previousSibling属性返回上一个兄弟节点
// console.log( child2.previousSibling );

// firstChild属性返回第一个子节点
// console.log( parent.firstChild );

// lastChild属性返回最后一个子节点
// console.log( parent.lastChild );

// 新出的几个属性，专门针对元素节点的
// nextElementSibling
// previousElementSibling
// firstElementChild
// lastElementChild
console.log( child2.nextElementSibling );// child3
console.log( child2.previousElementSibling );// child1
console.log( parent.firstElementChild );// child1
console.log( parent.lastElementChild );// child3

</script>
</body>
</html>